<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Bootstrap 实例</title>

	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M"
	 crossorigin="anonymous">

</head>

<body>
	<section class="container">
		<div class="row">
			<div class="col-md-6">
				<div class="card my-4">
					<div class="card-header">
						<h5 class="text-primary">基础表单</h5>
					</div>
					<div class="card-body">
						<form role="form " class="form-horizontal">
							<div class="form-group row">
								<label for="name" class="col-sm-3">文本</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" placeholder="请输入文本">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">电话</label>
								<div class="col-sm-9">
									<input type="tel" class="form-control" placeholder="请输入电话号码">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">数字</label>
								<div class="col-sm-9">
									<input type="number" class="form-control" placeholder="请输入数字">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">邮箱</label>
								<div class="col-sm-9">
									<input type="email" class="form-control" placeholder="请输入数字">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">密码</label>
								<div class="col-sm-9">
									<input type="password" class="form-control" placeholder="请输入密码">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">日期</label>
								<div class="col-sm-9">
									<input type="date" class="form-control" placeholder="请选择日期">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">时间</label>
								<div class="col-sm-9">
									<input type="time" class="form-control" placeholder="请选择时间">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">月份</label>
								<div class="col-sm-9">
									<input type="month" class="form-control" placeholder="请选择月份">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">周</label>
								<div class="col-sm-9">
									<input type="week" class="form-control" placeholder="请选择周">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">日期时间</label>
								<div class="col-sm-9">
									<input type="datetime-local" class="form-control" placeholder="请选择日期和时间">
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">多项选择</label>
								<div class="col-sm-9">
									<select class="form-control">
										<option>请选择</option>
									</select>
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">选择框</label>
								<div class="col-sm-9">
									<select class="form-control" multiple="">
										<option>请选择</option>
										<option>选项二</option>
									</select>
								</div>
							</div>
							<div class="form-group row">
								<label for="name" class="col-sm-3">上传</label>
								<div class="col-sm-9">
									<input type="file" id="inputfile">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3">多选</label>
								<div class="checkbox col-sm-9">
									<label>
										<input type="checkbox" name="r"> 请打勾
									</label>

									<label>
										<input type="checkbox" name="r"> 请打勾
									</label>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3">单选</label>
								<div class="radio col-sm-4">
									<label>
										<input type="radio" name="r"> 请打勾
									</label>
								</div>
								<div class="radio col-sm-4">
									<label>
										<input type="radio" name="r"> 请打勾
									</label>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3">添加备注</label>
								<div class="col-sm-9">
									<input class="form-control" type="text" placeholder="">
									<p class="">(备注)</p>
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3">文本域</label>
								<div class="col-sm-9 " style="margin-bottom:15px;">
									<textarea class="form-control" cols="60" rows="5"></textarea>
								</div>
							</div>
							<div class="form-group row">
								<div class="col-sm-10">
									<button type="submit" class="btn btn-primary">修改</button>
									<button type="submit" class="btn btn-success" style="margin-left:15px">取消</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="card my-4">
					<div class="card-header">
						<h5 class="text-primary">表单属性</h5>
					</div>
					<div class="card-body">
						<form class="form-horizontal">
							<div class="form-group row">
								<label class="col-sm-3">作废</label>
								<div class="col-sm-9">
									<input type="text" placeholder="disabled" disabled="" class="disabled form-control">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3">输入成功</label>
								<div class="col-sm-9">
									<input type="text" class="form-control is-valid">
								</div>
							</div>
							<div class="form-group row has-error">
								<label class="col-sm-3">输入错误</label>
								<div class="col-sm-9">
									<input type="text" class="form-control is-invalid">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3 col-form-label-sm">小号样式</label>
								<div class="col-sm-9">
									<input type="text" class="form-control form-control-sm">
								</div>
							</div>
							<div class="form-group row">
								<label class="col-sm-3 col-form-label-lg">大号样式</label>
								<div class="col-sm-9">
									<input type="text" class="form-control form-control-lg">
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script>
	<script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
</body>

</html>